<template>
    <div>
        <div class="manage-content">
            <div class="left-content">
                <ul class="nav-list">
                    <li class="list-li" :class="{active:spectype=='all'}" @click="selectspec('all')" >
                        <i class="icon icon0"></i>
                        全部商品
                    </li>
                    <li class="list-li" :class="{active:spectype=='discount'}" @click="selectspec('discount')" >
                        <i class="icon"></i>
                        特价商品
                    </li>
                    <li class="list-li" :class="{active:spectype=='best'}" @click="selectspec('best')" v-if="false">
                        <i class="icon icon1"></i>
                        热销商品
                    </li>
                    <li class="list-li" :class="{active:spectype=='newest'}" @click="selectspec('newest')" v-if="false">
                        <i class="icon icon2"></i>
                        新品力荐
                    </li>
                    <li class="list-li " :class="{active:item.id==cateid}" v-for="item in customTypeList" :key="item.id" @click="selectcate(item.id,item.name)">
                        {{item.name}}
                    </li>
                </ul>
            </div>
            <div class="right-content">
                <div class="tab-content">
                    <div class="top-info">
                        <a @click="zhuangtai(1)" class="zsz " :class="{active:goodsonline==1}">在售中 </a>
                        <a @click="zhuangtai(2)" class="yxj" :class="{active:goodsonline==0}">已下架 </a>
                    </div>
                    <div class="bottom-info">
                        <div class="bottom-info-tab" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="3">
                            <h3 class="title"><i class="icon"></i>{{btName}}</h3>
                            <ul class="list-ul">
                                <li class="list-li" v-for="item in goodsShop" :key="item.goods.goodsId">
                                    <div class="left-con">
                                        <img :src=item.goods.goodsThum alt="">
                                    </div>
                                    <div class="right-con" style="width:70%">
                                        <p class="title1" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{item.goods.goodsName}}</p>
                                        <div class="card-info-con" v-if="item.coupon.length!=0">
                                            <p class="card-info">{{item.coupon.percentage |amountMin100(2)}}元券 </p>
                                            <span class="end-time">有效期至：{{item.coupon.couponEndtime |formatDate()}}</span>
                                        </div>
                                        <div class="card-info-con" v-else>

                                        </div>
                                        <div class="price-info" v-if="item.coupon.length!=0">
                                            <div class="price2">原价 ￥{{(item.goods.goodsScreenPrice) | amountMin100(2)}}</div>
                                            <div class="price1"><span>券后</span>￥{{(item.goods.goodsScreenPrice-item.coupon.percentage)|amountMin100(2)}}</div>
                                        </div>
                                        <div class="price-info" v-else>
                                            <div class="price1" style="font-size: 10px;">
                                            <s style="margin-right:15px; color: black; font-size: 0.45rem" v-if="item.goods.goodsRealPrice!=item.goods.goodsScreenPrice" v-show="item.goods.discount==1">原价{{item.goods.goodsRealPrice| amountMin100(2)}}</s>
                                            <span >售价</span>￥{{(item.goods.goodsScreenPrice) | amountMin100(2)}}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="button-group">
                                        <a href="#" class="set-zk" @click="Specialoffer(item.goods.goodsId,'discount',item.goods.goodsScreenPrice)" v-show="1==item.goods.goodsOnline">设置特价</a>
                                        <a href="#" class="set-xp" v-if="item.goods.best">已热销</a>
                                        <a href="#" class="set-xp" v-else-if="item.goods.goodsOnline" @click="setspec(item.goods.goodsId,'best')" v-show="false">设置热销</a>
                                        <a href="#" class="set-xp" v-if="item.goods.newest">已新品</a>
                                        <a href="#" class="set-xp" v-else-if="item.goods.goodsOnline" @click="setspec(item.goods.goodsId,'newest')" v-show="false">设置新品</a>
                                        <a href="#" class="bj" v-show="false">编辑</a>
                                        <a href="#" class="xj" v-show="cateid" @click="xiajia(item.goods.goodsId,item.goods.goodsOnline)">{{item.goods.goodsOnline ==1?"下架":"上架"}}</a>
                                        <a href="#" class="del" v-show="spectype" @click="xiajia(item.goods.goodsId,item.goods.goodsOnline)">{{item.goods.goodsOnline ==1?"下架":"上架"}}</a><!--@click="cancelspec(item.goods.goodsId,spectype)"-->
                                        <a href="#" class="del" v-show="!item.goods.goodsOnline" @click="del(item.goods.goodsId)">删除</a>
                                        <div class="bianji" @click="TheEditorHref(item.goods.goodsId)">
                                            编辑
                                        </div>
                                    </div>
                                </li>
                            </ul>
                           
                        </div>
                          <loadingtmp :busy="busy" :datalength="goodsShop.length" :loadall="loadall"></loadingtmp>
                    </div>
                </div>
            </div>
        </div>
        <div class="Special_Settings" v-show="Special_Settings_style">
             <div class="Special_Settings_header">
                 <h1>设置产品特价</h1>
                 <div class="Theprice">
                    <span>原价</span>
                    <p>{{goodsScreenPrice |amountMin100(2)}}</p>
                 </div>
                 <div class="jiantou">
                     <img src="../../../assets/personal/images/shihuangse.png">
                 </div>
                  <div class="Theprice">
                    <span style="color:red;">特价(元)</span>
                    <input type="number"  placeholder="请填写" v-model="Specialoffer_price">
                 </div>
                 <div class="clearfix"></div>
                 <div class="btn_tejia">
                     <button @click="cancel">取消</button> <button @click="sub_Specialffer">确定</button>
                 </div>
             </div>
        </div>
        <business_footer :pageName="'busiProd'"></business_footer>
    </div>
</template>
<style scoped>
    @import "../../../assets/business/css/cp_manage.css";
    .bianji{
        color: #ffffff;
        display: block;
        width: 2.5rem;
        height: 1.25rem;
        margin-right: 1rem;
        text-align: center;
        line-height: 1.35rem;
        border-radius: 3px;
        font-size: 12px;
        background: #CD4F39;
    }
    .yuanjia_s{
        
    }
    .btn_tejia button{
      width: 49%;
      height:44px;
    }
    .jiantou{
    position: absolute;
    top:105px;
    left: 130px;
    }
    .clearfix{
        clear: both;
    }
    .Theprice{
        width: 104px;
        margin:  20px;
        float: left;
    }
    .Theprice span{
        line-height: 25px;
    }
    .Theprice p{
          background: #fef63a;
         border: none;
         text-align: center;
         line-height: 42px;
    }
     .Theprice input,.Theprice p{
         background: #fef63a;
         border: none;
         text-align: center;
     }
    .Special_Settings_header h1{
        font:17px 宋体;
        line-height: 52px;
        border-bottom: 1px solid #e5e5e5;
    }
    .Special_Settings_header{
        width: 80%;
        background: white;
        position: fixed;
        top:151px;
        z-index: 51;
        left: 10%;
    }
    .bottom-info-tab{
        height: 534px;
        overflow: scroll;
    }
    .nav-list{
        height: 618px;
        overflow: scroll;
    }
    .jinqian {
        margin-left: 6rem;
    }
    .Special_Settings{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 50;
    }
</style>
<script>
    import business_footer from "@/components/business_footer"
    import loadingtmp from '@/components/load/loading'
    export default {
        data() {
            return {
                prodlist: [],
                spectype: "all",
                cateid: 0,
                goodsonline: 1,
                page: 1,
                pageSize:6,
                busy: false,////////////
                loadall: false,
                cmid: '',
                customTypeList: [],
                goodsShop: {},
                btName: "全部商品",
                type_liebiao: '1',
                jsonspec: {"all":"全部商品", "discount": "特价商品", "best": "热销商品", "newest": "新品力荐" },
                Special_Settings_style:false,
                goodID:'',
                goodsScreenPrice:'',
                type_spec:'',
                Specialoffer_price:'',
               
            }
        },
        components: {
            business_footer,
            loadingtmp
        },
        mounted() {
            this.cmid = this.$route.query.cmid;
            this.loadcatelist();
        },
        methods: {
            TheEditorHref:function(goodid){//编辑  {name:'Business_Cp_manage',query:{spectype:'discount',cmid:accountinfo.companyId}
                this.$router.push({name:'Business_release_product',query:{good:goodid}})
            },
            zhuangtai:function(id){
                 this.page=1;
                 if(1==id){//在售
                   this.goodsonline=1
                 }else{//下架
                   this.goodsonline=0
                 }               
                 this.loadprod();
                
                 console.log("加载了")
            },
            loadcatelist() {
                this.$http.get(this.APIURL_PREFIX + '/api/wap/goodsTypeCustom?companyId=' + this.cmid).then((response) => {
                    this.customTypeList = response.data.data
                }).catch(function (err) {
                    console.log(err)
                })
            },
            loadprod(flag) {//all 
                let prodparams = { goodsProviderId: this.cmid, goodsOnline: this.goodsonline, page: this.page, rows: this.pageSize }
                if (this.cateid) { prodparams.customTypeId = this.cateid }
                if (this.spectype) { prodparams[this.spectype] = 1 }

                this.$http.get(this.APIURL_PREFIX + '/api/wap/coupon/goods/custom', { params: prodparams }).then((response) => {
                    if (flag) {
                        this.goodsShop = this.goodsShop.concat(response.data.data);
                    } else {
                       this.goodsShop = response.data.data;
                    }
                    if (0 == response.data.data.length || response.data.data.length < this.pageSize) {
                        this.busy = true;
                        this.loadall = true;
                    }
                    else {
                        this.busy = false;
                        this.page++
                    }
                }).catch(function (err) {
                    console.log(err)
                })
            },
             loadMore() {
                this.busy = true;
                setTimeout(() => {
                    this.loadprod(this.page > 1);
                }, 500);
            },
            selectcate(id,type,) { //商品
                this.page=1,
                this.busy=false,////////////
                this.loadall=false,
                this.cateid = id;
                this.spectype = "";
                this.btName = this.customTypeList.filter(function (item) { return item.id == id })[0].name;
                this.goodsShop=[]
                this.loadprod();
            },
            selectspec(spt) {//3推荐   
                this.page=1;        
                this.spectype = spt;
                this.cateid = 0;
                this.btName = this.jsonspec[spt];
                this.loadprod();
            },
            Specialoffer(id,type,ScreenPrice){//设置特价
                 this.goodID=id
                 this.type_spec=type
                 this.goodsScreenPrice=ScreenPrice
                 this.Special_Settings_style=!this.Special_Settings_style
            },
            setspec(id, spt) {//设置前3
                let jsonspec = { goodsId: id };
                jsonspec[spt] = 1;
                this.$http.put(this.APIURL_PREFIX + '/api/wap/goods', $.param(jsonspec)).then((response) => {
                    this.loadprod();
                }).catch(function (err) {
                });
            },
            cancel(){//取消
                 this.Special_Settings_style=!this.Special_Settings_style
            },
            cancelspec(id, spt) {//移出
                let jsonspec = { goodsId: id };
                jsonspec[spt] = 0;
                this.$http.put(this.APIURL_PREFIX + '/api/wap/goods', $.param(jsonspec)).then((response) => {
                    this.loadprod();
                }).catch(function (err) {
                });
            },
            del(id) {//删除
                let vm=this;
                layer.confirm('删除该商品，您确定删除该商品吗？', {
                    btn : [ '确定', '取消' ]//按钮
                }, 
                function() {
                   //  var index = layer.load(0,{shade: [0.7, '#393D49']}, {shadeClose: true})
                     vm.$http.delete(vm.APIURL_PREFIX + "/api/wap/goods/" + id).then((response) => {
                        if (0 == response.data.code) {
                            vm.goodsShop = vm.goodsShop.filter(function (item) { return item.goods.goodsId != id })
                        }
                         layer.msg("删除成功")
                    }).catch(function (err) {
                        console.log(err)
                    })
                }); 
            },
            xiajia(id, gol) {//上下架
                console.log("id" + id + "gol" + gol);
                this.$http.put(this.APIURL_PREFIX + '/api/wap/goods', $.param({ goodsId: id, goodsOnline: (gol + 1) % 2 })).then((response) => {
                    this.loadprod();
                }).catch(function (err) {
                });
            },
            sub_Specialffer(){
                 if(""==this.Specialoffer_price){
                     layer.msg("价格不能为空")
                     return
                 }
                 this.$http.put(this.APIURL_PREFIX + '/api/wap/goods', $.param({goodsRealPrice:this.goodsScreenPrice,goodsScreenPrice:this.Specialoffer_price*100,discount:1,goodsId:this.goodID})).then((response) => {
                    this.loadprod();
                    layer.msg("添加成功-请到特价商品中查看")
                    this. Special_Settings_style=false;
                    this.Specialoffer_price=''
                }).catch(function (err) {
                });
            }
        }
        ,
        watch:{
            page:function(naVal,oldVal){
                if(1==naVal){
                     document.querySelector(".bottom-info-tab").scrollTop=0
                }
            },
            Specialoffer_price:function(naVal,oldVal){
            if(naVal*100> this.goodsScreenPrice){
                layer.msg("特价不能大于原价")
                this.Specialoffer_price=""
            }
            }
        }
    }
</script>